<template>
    <div>
        <div>
            <div class="select">
                <el-tabs v-model="activeName" @tab-click="handleClick">
                    <el-tab-pane label="日报" name="first"></el-tab-pane>
                    <el-tab-pane label="月报" name="second"></el-tab-pane>
                    <el-tab-pane label="年报" name="third"></el-tab-pane>
                </el-tabs>
            </div>
        </div>
        <div>
            <span class="demonstration"style="color:#ffffff;">所属单位：</span>
            <el-select
                    class="addPosInput1"
                    size="small"
                    v-model="pos.name" placeholder="请选择 所属单位">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value"/>
            </el-select>
            <span class="demonstration"style="color:#ffffff;">站点：</span>
            <el-select
                    class="addPosInput2"
                    size="small"
                    v-model="value" placeholder="请选择 站点">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>
            <span class="demonstration"style="color:#ffffff;">楼层：</span>
            <el-select
                    class="addPosInput3"
                    size="small"
                    v-model="value" placeholder="请选择 楼层">
                <el-option
                        v-for="item in options"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value">
                </el-option>
            </el-select>

            <el-button size="small"icon="el-icon-checktype"type="primary">搜索</el-button>

        </div>

        <div>
            <div class="block">
                <span class="demonstration"></span>
                <el-date-picker
                        v-model="value1"
                        type="daterange"
                        range-separator="至"
                        start-placeholder="开始日期"
                        end-placeholder="结束日期">
                </el-date-picker>

                <el-button size="small" type="primary" icon="el-icon-download"></el-button>
            </div>

        </div>

        <div class="posManaMain">
            <el-table
                    border
                    :data="datamenu"
                    size="small"
                    height="250"
                    stripe
                    style="background-color:#182450;">
                <el-table-column
                        style="background-color:#182450;"
                        prop="id"
                        label="设备号"
                        width="150">
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="线路地址"
                        width="250">
                </el-table-column>
                <el-table-column
                        prop="time1"
                        label="00时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time2"
                        label="01时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time3"
                        label="02时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time4"
                        label="03时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time5"
                        label="04时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time6"
                        label="05时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time7"
                        label="06时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time8"
                        label="07时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time9"
                        label="08时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time10"
                        label="09时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time11"
                        label="10时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time12"
                        label="11时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time13"
                        label="12时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time14"
                        label="13时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time15"
                        label="14时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time16"
                        label="15时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time17"
                        label="16时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time18"
                        label="17时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time19"
                        label="18时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time20"
                        label="19时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time21"
                        label="20时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time22"
                        label="21时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time23"
                        label="22时（kw.h）"
                        width="100">
                </el-table-column>
                <el-table-column
                        prop="time24"
                        label="23时（kw.h）"
                        width="100">
                </el-table-column>
            </el-table>
        </div>

        <div>
            <div>
                <div class="page">
                    <el-pagination
                            background
                            layout="prev, pager, next"
                            :total="1000">
                    </el-pagination>
                </div>
            </div>

        </div>
    </div>
</template>

<script>
    export default {
        name: "Test2",
        data() {
            return {
                radio:3,
                pos: {
                    name: ''
                },
                datamenu: [{id:'98cc4d3037be',
                            address:'朔城区鄯阳街3号如家快捷酒店',
                            time1:'0',
                    time2:'0',
                    time3:'0',
                    time4:'0',
                    time5:'0',
                    time6:'0',
                    time7:'0',
                    time8:'0',
                    time9:'0',
                    time10:'0',
                    time11:'0',
                    time12:'0',
                    time13:'0',
                    time14:'0',
                    time15:'0',
                    time16:'0',
                    time17:'0',
                    time18:'0',
                    time19:'0',
                    time20:'0',
                    time21:'0',
                    time22:'0',
                    time23:'0',
                    time24:'0',}]
            }
        },
        methods: {
            handleClick(tab, event) {
                console.log(tab, event);
                initdatamenu()
                {
                    this.getRequest('/system/basic/pos/').then(resp => {
                        if (resp) {
                            this.datamenu = resp;
                        }
                    })
                }
            }
        }
    }
</script>

<style >
    .addPosInput1{
        width:300px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .addPosInput2{
        width:300px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .addPosInput3{
        width:300px;
        margin-right: 10px;
        margin-top: 20px;
    }
    .posManaMain{
        margin-top: 20px;
    }
    .block{
        margin-top: 35px;
        margin-right: 35px;
    }
    .page{
        margin-left: 490px;
    }
    .el-tabs__item {
        color:#ffffff;
    }
    .cell{
        background-color: #182450;
    }
    .el-table-column{
        background-color: #182450;
    }
    .el-table_2_column_27.is-leaf.el-table__cell{
        background-color:#182450;
    }
</style>